<template>
	<view class="content">
		<view class="header">
			<view class="search">
				<view class="s_box">
					<view class="left">
						<view class="icon">
							<image src="https://wx.caobenjiankang.com/image/shopowner/search.png" mode="aspectFit"></image>
						</view>
						<input class="uni-input font28" focus placeholder="请输入关键词" placeholder-style="font-size: 28rpx;"
							@blur="blur" />
					</view>
					<view class="title font28" @click="seach">
						搜索
					</view>
				</view>
			</view>
			<view class="tabs">
				<uv-tabs :list="tabsList" :current="current" lineColor="#1DB481" :inactiveStyle="{color:'#666666'}"
					:activeStyle="{color:'#333333'}" @click="tabs" :scrollable="true"></uv-tabs>
			</view>
		</view>
		<view class="box">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower"
				v-if="list.length > 0">
				<view class="item" v-for="(item,index) in list" :key="item.id" @click="to(item.id)" v-if="s_index==item.type">
					<view class="top">
						<view class="left">
							<view class="icon">
								<image src="https://wx.caobenjiankang.com/image/shopowner/contracts.png" mode="aspectFit"></image>
							</view>
							<view class="title font26">
								合同编号：{{item.no}}
							</view>
						</view>
						<view class="start font26">
							{{item.status}}
						</view>
					</view>
					<view class="info">
						<!-- <view class="type font28">
							{{item.signature}}
						</view> -->
						<view class="Initiator font28">
							发起人：{{item.store}}
						</view>
						<view class="signatory">
							<view class="title font28">
								<view class="des">
									签署方：
								</view>
								<view class="text">
									{{item.name}} {{item.id_number}} {{item.mobile}}
									<text class="c_start font20" :class="item.status == '已作废'?'wei':'qian'">
										{{item.status}}
									</text>
								</view>
							</view>
						</view>
						<view class="time font28">
							签署截止时间：{{$u.timeFormat(item.signature_end_time, 'yyyy-mm-dd hh:MM')}}
						</view>
					</view>
					<view class="btnBox">
						<view class="items close font28" @click.stop="to(item.id)" v-if="item.status == '已作废'">
							查看合同
						</view>
						<view class="items close font28" @click.stop="deleteC(item.id)" v-if="item.status == '审核中'">
							撤销合同
						</view>
						<view class="items sumbite font28" @click.stop="shareC(item.id)"
							v-if="item.status == '签署中' || item.status == '已生效'">
							分享合同
						</view>
						<view class="items sumbite font28" @click.stop="to(item.id)" v-if="item.status =='签署中'">
							签署合同
						</view>
						<view class="items sumbite font28" @click.stop="dowC(item.id)" v-if="item.status == '已生效'">
							下载合同
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="font32 fontw" style="color:#969696;text-align: center;" v-else>
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [
					{ name: '全部' },
					{ name: '签署中' },
					{ name: '审核中' },
					{ name: '已生效' },
					{ name: '已作废' }
				],
				current: 0,
				s_index: '-1',
				scrollTop: 0,
				list: [],
				name: ''
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			seach() {
				this.getData()
			},
			blur(e) {
				this.name = e.detail.value
			},
			async getData() {
				let data = await this.$api.shopowner.storeContractList({
					status: this.s_index,
					name: this.name
				})
				if (this.s_index == '-1') {
					data.map((item, index) => {
						item.type = -1
					})
					this.list = data
				} else {
					data.map((item, index) => {
						if (item.status == '签署中') {
							item.type = 0
						}
						if (item.status == '审核中') {
							item.type = 1
						}
						if (item.status == '已生效') {
							item.type = 2
						}
						if (item.status == '已作废') {
							item.type = 3
						}
					})
					this.list = data
				}
			},
			tabs(item) {
				this.current = item.index
				this.s_index = Number(item.index) - 1
				this.getData()
			},
			to(id) {
				uni.navigateTo({
					url: '/shopowner/pages/contractD/contractD?id=' + id
				})
			},
			scrolltolower() {

			},
			async deleteC(id) {
				let data = await this.$api.shopowner.contractRevoke({ id: id })
				this.getData()
				uni.showToast({
					title: data,
					duration: 2000,
					icon: 'success'
				});
			},
			dowC(id) {},
			shareC(id) {
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: '/static/logo.png',
					title: '合同',
					summary: '合同',
					miniProgram: {
						id: id,
						path: '/shopowner/pages/contractD/contractD',
						type: 0,
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			padding-top: 33rpx;
			background-color: #fff;
			margin-bottom: 18rpx;

			.search {
				padding: 0 20rpx 0 35rpx;

				.s_box {
					background: #F5F5F5;
					border-radius: 50rpx;
					padding: 20rpx 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						.icon {
							width: 24rpx;
							height: 26rpx;
							margin-right: 26rpx;
							display: flex;
							align-items: center;

							image {
								width: 24rpx;
								height: 26rpx;
							}
						}

						.uni-input {}
					}

					.title {
						color: #333333;
					}
				}
			}
		}

		.box {
			padding: 0 29rpx;

			.scroll-Y {
				height: calc(100vh - var(--status-bar-height) - 204rpx);

				.item {
					margin-bottom: 18rpx;
					padding: 27rpx 24rpx;
					background-color: #fff;
					border-radius: 16rpx;

					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 57rpx;

						.left {
							.icon {
								width: 27rpx;
								height: 27rpx;
								display: flex;
								align-items: center;
								margin-right: 10rpx;

								image {
									width: 27rpx;
									height: 27rpx;
								}
							}

							.title {
								color: #999999;
							}
						}

						.start {
							color: #FD6906;
						}
					}

					.info {
						line-height: 46rpx;

						.type {
							color: #666666;
						}

						.Initiator {
							color: #666666;
						}

						.signatory {
							.title {
								color: #666666;
								display: flex;

								.des {
									width: 112rpx;
								}

								.text {
									flex: 1;

									.c_start {
										border-radius: 5rpx;
										color: #FFFFFF;
										padding: 7rpx 22rpx;
										margin-left: 16rpx;
									}

									.wei {
										background: #FD6906;
									}

									.qian {
										background: #1EB481;
									}
								}
							}


						}

						.time {
							color: #666666;
						}
					}

					.btnBox {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						margin-top: 62rpx;

						.items {
							margin-left: 24rpx;
							padding: 17rpx 27rpx;
							border-radius: 5rpx;
						}

						.close {
							color: #666666;
							border: 2px solid #999999;
						}

						.sumbite {
							color: #1EB481;
							border: 2px solid #1EB481;
						}
					}
				}
			}
		}
	}
</style>